<template>
    <div id="remark_wrap">
        <el-input ref="text" type="textarea" placeholder="期待你的神评论" :autosize="{ minRows: 2 }" v-model="remark"
            maxlength="300" show-word-limit></el-input>
        <!-- 这里写一个表情包和发布评论 -->
        <div class="send_wrap">
            <span><i class="iconfont icon-biaoqing pointerHover"></i></span>
            <el-divider direction="vertical"></el-divider>
            <span @click="publish" class="pointerHover">发布</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        clear: {
            type: Boolean,
            default: false
        },
        id:{
            type:[String,Number]
        }
    },
    name: 'Remark',
    data() {
        return {
            remark: ""
        }
    },
    methods: {
        publish() {
            //要不要对数据进行验证，之后可以搞。
            this.$emit("publish", this.remark,this.id);
        }
    },
    watch: {
        clear: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.remark = "";
                    this.$emit("success")//通知上级组件清除成功！
                }
            },
            immediate: true
        }
    }
}
</script>

<style lang="less" scoped>
#remark_wrap {
    position: relative;
    margin: 10px 0px;

    & .send_wrap {
        position: absolute;
        right: 60px;
        bottom: 5px;
    }

}
</style>